<template>
  <div class="settingsBox">
    <div class="settingsBox1">
      <el-page-header @back="goBack">
        <template #content>
          <span class="text-large font-600 mr-3">设置新密码</span>
        </template>
      </el-page-header>
    </div>
    <div class="settingsBox2">
      <div class="settingsBox3">
        <a-form>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-input type="password" placeholder="请设置密码" ref="input1" />
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-input type="password" placeholder="请确认新密码" ref="input2" />
          </a-form-item>
          <a-form-item :wrapper-col="buttonItemLayout.wrapperCol">
            <a-button type="primary" @click="onSubmit"> 完成 </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();

import { reactive, computed } from "vue";
// import { getForget } from "../../../../utils/api/forget.js";
import axios from "axios";

const goBack = () => {
  router.go(-1);
};

import { ref } from "vue";
const input1 = ref("");
const input2 = ref("");

const getUserIdSomehow = () => {
  // 这里可以根据你的实际情况获取用户 ID，比如从某个存储中获取或通过其他方式生成
  return "1357";
};

const formData = reactive({
  formLayout: "horizontal",
});

const formItemLayout = computed(() => {
  const { formLayout } = formData;
  return formLayout === "horizontal"
    ? {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      }
    : {};
});

const buttonItemLayout = computed(() => {
  const { formLayout } = formData;
  return formLayout === "horizontal"
    ? {
        wrapperCol: { span: 14, offset: 4 },
      }
    : {};
});

const onSubmit = async (e) => {
  e.preventDefault();
  try {
    const response = await axios.post("/api/post/dateDoctorPassword", {
      id: getUserIdSomehow(),
      oldPassword: input1.value.input.stateValue,
      newPassword: input2.value.input.stateValue,
    });
    console.log(123,response);
    
    if (response.data.code === 200) {
      // 接口调用成功，可以根据实际情况进行处理，这里只是简单地跳转到登录页面
      router.push("/login");
    } else {
      // 根据不同的错误码给出相应的错误提示
      console.log(response.data.msg);
    }
  } catch (error) {
    // 处理请求过程中的错误
    console.error("请求错误：", error);
  }
};
</script>


<style lang="scss">
.settingsBox {
  width: 100%;
  height: 100%;
  background: #3087ea;
  .settingsBox1 {
    width: 100%;
    color: #fff;
    .text-large {
      color: #fff;
    }
  }
  .settingsBox2 {
    width: 285px;
    height: 200px;
    background: #fff;
    position: absolute;
    top: 20%;
    left: 10%;
    .ant-btn {
      width: 200px;
      position: absolute;
      top: 40px;
      right: 35px;
      background: #fff;
      color: #3087ea;
    }
  }
  .settingsBox3 {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50px;
    left: 40px;
  }
  .ant-form-item-control-input-content {
    display: flex;
  }
  .ant-input {
    width: 200px;
    height: 40px;
  }
  .text-large {
    margin-left: 60px;
    font-size: 20px;
  }
}
</style>